<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>时间段选择</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script src="js/vue.js"></script>
    <style>
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div id="all">
    <img src="img/logo.jpg" style="width: 50%" ><br>
    <div style="position: absolute;top: 30%" class="btn-group-vertical btn-group btn-group-lg" role="group" aria-label="...">
        <button type="button" :class="nowUrl=='/studentStatus.html'?btnInfo:btnDefault" @click="goToStudentStatus">我的预约情况</button>
        <button type="button" :class="nowUrl=='/studentChooseTime.html'?btnInfo:btnDefault">选择预约时间</button>
        <button type="button" :class="nowUrl=='/studentChooseSeat.html'?btnInfo:btnDefault" @click="studentChooseArea">选择预约位置</button>
    </div>
    <div style="position: absolute;left: 10%" v-if="recommendTime>0">
    <!--<div style="position: absolute;left: 10%">-->
        <h3>推荐时间段</h3>
        <div style="height: 300px">
            <div class="btn-group">
                <div>
                    <ul>
                        <li  v-for="index in recommendTime "  style="float: left;padding-top: 20px;padding-left: 30px">
                            <button class="btn btn-default btn-lg" @click="beginReservationByRecommendTime((nowTime>=6?nowTime:6)+index,(nowTime>=6?nowTime:6)+index+1)" style="height: 100px;width: 350px;position: relative" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <!--如果现在的时间没有到7点（如现在4点），那么只能从7点开始预约-->
                                {{(nowTime>=6?nowTime:6)+index+":00"}}-{{(nowTime>=6?nowTime:6)+index+1+":00"}}
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <h3>自定义时间段</h3>

        <!-- Split button -->
        <div class="btn-group">
            <button type="button" class="btn" v-if="selfBeginTime==''">起始时间</button>
            <button type="button" class="btn"  v-if="selfBeginTime!=''">{{"起始时间-->"+selfBeginTime+":00"}}</button>
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <li v-for="index in (21-nowTime)>=15?15:(21-nowTime)>0?(21-nowTime)>=15?15:(21-nowTime):0" @click="setSelfBeginTime((nowTime>6?nowTime:6)+index)">{{(nowTime>6?nowTime:6)+index+":00"}}</li>
            </ul>
        </div>

        <!-- Split button -->
        <div class="btn-group" style="left: 150px">
            <button type="button" class="btn" v-if="selfOverTime==''">结束时间</button>
            <button type="button" class="btn"  v-if="selfOverTime!=''">{{"结束时间-->"+selfOverTime+":00"}}</button>
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <li v-for="index in (22-selfBeginTime)>=15?15:(22-selfBeginTime)>0?(22-selfBeginTime)>=15?15:(22-selfBeginTime):0" @click="setSelfOverTime((selfBeginTime>6?selfBeginTime:6)+index)">{{(selfBeginTime>6?selfBeginTime:6)+index+":00"}}</li>
            </ul>
            <button type="button" @click="beginReservationBySelfTime" style="left: 130px" class="btn btn-default">开始预约</button>
        </div>
    </div>
    <div style="padding-left: 30%" v-show="recommendTime<=0">
        <h1>今日预约已结束，请明日再来</h1>
    </div>
</div>
</body>
<script>
    var v1=new Vue({
        el:"#all",
        data:{
            //当前时间的小时数,
            nowTime:new Date().getHours(),
            //最多提供到22点,最多显示8条,同时保证值不能为负数
            recommendTime:(21-new Date().getHours()>8?8:21-new Date().getHours())>0?(21-new Date().getHours()>8?8:21-new Date().getHours()):0,
            // recommendTime:8,
            //自定义开始时间
            selfBeginTime:"",
            //自定义结束时间
            selfOverTime:"",
            //当前url地址
            nowUrl:window.location.pathname,
            isdefaultOrNot:window.location.pathname=='/student.html',
            btnInfo:'btn btn-info',
            btnDefault:'btn btn-default',
        },
        methods:{
            setSelfBeginTime(time){
                this.selfBeginTime=time;
                this.selfOverTime=0;
            },
            setSelfOverTime(time){
                this.selfOverTime=time;
            },
            //定义一个根据自定义时间跳转到座位选择页面的方法
            beginReservationBySelfTime(){
                if ( confirm("确定预约"+this.selfBeginTime+":00-"+this.selfOverTime+":00时间段吗？")){
                    location.href="studentChooseSeat.html?beginTime="+this.selfBeginTime+"&overTime="+this.selfOverTime;
                }
            },
            //定义一个根据推荐时间跳转到座位选择页面的方法
            beginReservationByRecommendTime(beginTime,overTime){
                if ( confirm("确定预约"+beginTime+":00-"+overTime+":00时间段吗？")){
                    location.href="studentChooseSeat.html?beginTime="+beginTime+"&overTime="+overTime;
                }
            },
            //定义一个警告用户选择预约时间的方法
            studentChooseArea(){
                alert("请先选择预约时间");
            },
            //定义一个返回到状态页的方法
            goToStudentStatus(){
                location.href="studentStatus.html"
            }
        }
    })
</script>
</html>